<template>
  <el-form :inline="true" :model="state.dataForm" @keyup.enter="loadData">
    <div class="grid-container">
      <el-form-item label="预定展会">
        <el-input v-model="state.dataForm.exhibitionName" placeholder="请选择" clearable />
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="state.dataForm.company" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="预定日期">
        <el-date-picker v-model="state.dataForm.startDay" type="datetime" placeholder="开始时间" style="width: 200px;"
          value-format="YYYY-MM-DD HH:mm:ss" clearable />
        <span style="margin: 0 10px;">至</span>
        <el-date-picker v-model="state.dataForm.endDay" type="datetime" placeholder="结束时间" style="width: 200px;"
          value-format="YYYY-MM-DD HH:mm:ss" :default-time="new Date(0, 0, 0, 23, 59, 59)" clearable />
      </el-form-item>
      <div style="text-align: right;">
        <el-button type="primary" @click="loadData">查询</el-button>
        <el-button @click="resetForm"
          style="background: rgba(239, 244, 255, 1);border: 1px solid rgba(16, 98, 202, 1);color: #1062CA;border-radius: 5px;">重置</el-button>
      </div>
    </div>
    <el-table :header-cell-style="{ background: '#eef1f6', color: '#1f2d3d', 'border-color': '#dfe6ec' }"
      v-loading="dataListLoading" :data="dataList" border style="width: 100%">
      <el-table-column align="center" prop="exhibitionName" label="预定展会" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.exhibitionName || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="company" label="公司名称" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.company || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="userName" label="联系人" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.userName || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="phone" label="联系电话" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.phone || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="position" label="职位" width="80" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.position || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="product" label="主营产品" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.product || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="address" label="公司地址" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.address || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="isFirst" label="首次参展" width="90" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.isFirst || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="area" label="展位面积" width="90" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.area || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createAt" label="预定时间" width="180" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.createAt || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.remark || '-' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <el-button link style="color: rgba(22, 119, 255, 1)" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="20" :total="total"
      layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs } from "vue";
import baseService from "@/service/baseService";
import AddOrUpdate from "./book-add-or-update.vue";
import useView from "@/hooks/useView";
const dataList = ref<any[]>([]);
const total = ref(0);
const page = ref(1);
const limit = ref(20);
const dataListLoading = ref(false);


const view = reactive({
  dataForm: {
    exhibitionName: "",
    company: "",
    createAt: "",
    startDay: "",
    endDay: "",
  }

})


// 列表接口
const loadData = async () => {
  dataListLoading.value = true;
  try {
    const params = {
      page: page.value,
      limit: limit.value,
      ...state.dataForm,
    };
    const res = await baseService.get("/noc/nocuserexhibtionapply/list", params);

    const list = (res.page?.list || []).map((item: any) => ({ ...item }));
    dataList.value = list;
    total.value = res.page?.totalCount || 0;
  } catch (err) {
    console.error("❌ 加载失败", err);
  } finally {
    dataListLoading.value = false;
  }
};

const resetForm = () => {
  state.dataForm.exhibitionName = "";
  state.dataForm.company = "";
  state.dataForm. startDay = "";
  state.dataForm.endDay = "";
  page.value = 1;
  loadData();
};

const handleSizeChange = (val: number) => {
  limit.value = val;
  page.value = 1;
  loadData();
};

const handleCurrentChange = (val: number) => {
  page.value = val;
  loadData();
};

//点击编辑跳转
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

//
onMounted(() => {
  loadData();
});

const refreshDataList = () => {
  loadData();
};

const state = reactive({ ...useView(view), ...toRefs(view) });
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  white-space: nowrap;
}

.el-input {
  width: 200px;
}

.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: left;
}
</style>